<template>
  <div class="app-container">
    <el-card shadow="never">
      <div slot="header" class="card-header">
        <span>房东账号管理</span>
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="openCreate">
          新增房东账号
        </el-button>
      </div>

      <el-form :inline="true" :model="queryParams" class="filter-form" label-width="80px">
        <el-form-item label="手机号">
          <el-input
            v-model.trim="queryParams.phonenumber"
            placeholder="请输入手机号"
            size="mini"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input
            v-model.trim="queryParams.nickName"
            placeholder="请输入昵称"
            size="mini"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" v-loading="loading" border stripe>
        <el-table-column prop="userId" label="用户ID" width="100" align="center" />
        <el-table-column prop="nickName" label="昵称" min-width="140" />
        <el-table-column prop="phonenumber" label="手机号" width="160" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-refresh"
              @click="handleResetPassword(scope.row)"
            >重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog
      title="新增房东账号"
      :visible.sync="createDialogVisible"
      width="420px"
      destroy-on-close
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model.trim="form.phone" maxlength="20" />
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model.trim="form.password" maxlength="30" show-password />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model.trim="form.nickname" maxlength="30" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model.trim="form.realName" maxlength="30" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitCreate">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listLandlords, createLandlord, resetLandlordPassword } from '@/api/system/landlord'

export default {
  name: 'LandlordAccount',
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        phonenumber: undefined,
        nickName: undefined
      },
      createDialogVisible: false,
      submitLoading: false,
      form: {
        phone: '',
        password: '',
        nickname: '',
        realName: ''
      },
      rules: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^\d{6,20}$/, message: '请输入有效手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少6位', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const res = await listLandlords(this.queryParams)
        this.list = res.rows || []
        this.total = res.total || 0
      } finally {
        this.loading = false
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        phonenumber: undefined,
        nickName: undefined
      }
      this.getList()
    },
    openCreate() {
      this.createDialogVisible = true
      this.submitLoading = false
      this.form = {
        phone: '',
        password: '',
        nickname: '',
        realName: ''
      }
    },
    submitCreate() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        this.submitLoading = true
        try {
          await createLandlord(this.form)
          this.$message.success('创建成功')
          this.createDialogVisible = false
          this.getList()
        } finally {
          this.submitLoading = false
        }
      })
    },
    handleResetPassword(row) {
      this.$prompt('请输入新的密码（至少6位）', '重置密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{6,}$/,
        inputErrorMessage: '请输入不少于6位的密码'
      }).then(async ({ value }) => {
        await resetLandlordPassword(row.userId, value)
        this.$message.success('重置成功')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-form {
  margin-bottom: 16px;
}
</style>
